@import "../mixins";
@import "common";
@import "item-reset";
@import "index.scss";

//引入购物车按钮,满足迪迪
@import "cart";

.kinds{
    margin-top: .7rem;
}

.shopping {

    //商城首页
    &.index {

        @import "index-icon";

        .icon {
            @include fontFace('shopping-index');
            margin-top: .11rem;
        }

        .sidebar {
            position: relative;
            width: 25%;
            height: .3rem;
            text-align: center;
        }

        .fixed-wrapper {
            position: fixed;
            top: .7rem;
            width: 25%;
            height: 100%;
            background-color: $gray;
        }

        .type {
            position: relative;
            height: .5rem;
            font-size: .15rem;
            line-height: .5rem;
            background-color: $gray;

            &.active {
                color: $blue;
                background-color: #fff;
            }

            &.active::before {
                content: '';
                position: absolute;
                display: block;
                height: 100%;
                border-left: .035rem solid $blue;
            }
        }

        .content {
            margin-top: .1rem;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            background-color: #fff;
        }

        .icon-item {
            height: .675rem;
            text-align: center;

            .icon-text {
                margin-bottom: .11rem;
            }
        }

        .shopping-cart {
            margin: 0;
            font-family: shopping !important;
        }
    }

    //商品列表
    &.item-list {
        padding: .1rem;

        .img-box {
            &:first-child {
                margin-right: .05rem;
            }

            &:last-child {
                margin-left: .05rem;
            }

            &:first-child:last-child {
                margin: 0;
                width: 1.725rem;
            }

            width: 50%;
            height: 2.65rem;
            margin-bottom: .1rem;
            background-color: #fff;

            .lf-img {
                height: 1.825rem !important;
                background-size: cover;
            }
        }

        .item-name {
            margin-top: .1rem;
            margin-bottom: .16rem;
            padding-top: .01rem;
            height: .28rem;
            font-size: .15rem;

            @media screen and (max-width: 320px){
                height: .286rem;
                margin-bottom: .13rem;
            }

            @media screen and (max-width: 360px){
                height: .3rem;
                margin-bottom: .14rem;
            }

            @media screen and (min-width: 375px){
                height: .3rem;
            }

            @include text-dot(2);
        }

        .item-name,
        .price-wrapper {
            position: relative;
            padding-left: .06rem;
        }

        .price-wrapper {
            white-space: nowrap;
            overflow: hidden;
        }


        .discount {
            position: absolute;
            right: .02rem;
            margin-bottom: .02rem;
            display: inline-block;
            width: .425rem;
            height: .2rem;
            line-height: .2rem;
            text-align: center;
            border-radius: 2px;

            @media screen and (max-width: 320px){
                margin-bottom: .01rem;
            }

        }

    }
}